<!--
 * @Author: YTian
 * @Date: 2023-05-15 20:28:28
 * @LastEditTime: 2023-05-20 10:46:21
 * @Description: 音乐表格组件
 * @FilePath: \pcsong\src\components\Table.vue
-->
<script setup>
// ========= 导入全局数据 ========= //
import { Song__datas__links_push, last_or_next } from '@/global/data'

import { download } from '@/global/api.ts'

// ========= 导入悬浮组件 ========= //
import { NPopover } from 'naive-ui'

const props = defineProps({ song__list: { type: Array, required: true } })
</script>

<template>
	<div class="table">
		<div class="table__title">
			<div class="table__item">
				<div>歌曲</div>
				<div></div>
				<div>作者</div>
				<div>专辑</div>
			</div>
		</div>

		<div class="box">
			<div class="table__item tb" v-for="item of song__list">
				<div class="button">{{ item.song__name }}</div>
				<div class="icons">
					<n-popover trigger="hover">
						<template #trigger>
							<span style="font-size: 0">
								<svg
									@click="
										Song__datas__links_push(item),
											last_or_next()
									"
									width="20"
									height="20"
									viewBox="0 0 20 20"
									fill="none"
									xmlns="http://www.w3.org/2000/svg"
								>
									<path
										d="M10.0001 1.66669C5.39771 1.66669 1.66675 5.39765 1.66675 10C1.66675 14.6024 5.39771 18.3334 10.0001 18.3334C14.6025 18.3334 18.3334 14.6024 18.3334 10C18.3334 8.87015 18.1085 7.79277 17.7011 6.81027C17.5962 6.55735 17.4793 6.31073 17.351 6.07115"
										stroke="black"
										stroke-width="1.33333"
										stroke-linejoin="round"
									/>
									<path
										d="M14.5834 4.16669C15.5039 4.16669 16.2501 3.60704 16.2501 2.91669C16.2501 2.22633 15.5039 1.66669 14.5834 1.66669C13.663 1.66669 12.9167 2.22633 12.9167 2.91669C12.9167 3.60704 13.663 4.16669 14.5834 4.16669Z"
										stroke="black"
										stroke-width="1.33333"
										stroke-linejoin="round"
									/>
									<path
										d="M9.99992 12.9166C11.6108 12.9166 12.9166 11.6108 12.9166 9.99998C12.9166 8.38915 11.6108 7.08331 9.99992 7.08331C8.38909 7.08331 7.08325 8.38915 7.08325 9.99998C7.08325 11.6108 8.38909 12.9166 9.99992 12.9166Z"
										stroke="black"
										stroke-width="1.33333"
										stroke-linejoin="round"
									/>
									<path
										d="M12.9167 2.70831V9.99998"
										stroke="black"
										stroke-width="1.33333"
										stroke-linejoin="round"
									/>
								</svg>
							</span>
						</template>
						<span>播放</span>
					</n-popover>

					<n-popover trigger="hover">
						<template #trigger>
							<span style="font-size: 0">
								<svg
									@click="Song__datas__links_push(item)"
									width="20"
									height="20"
									viewBox="0 0 20 20"
									fill="none"
									xmlns="http://www.w3.org/2000/svg"
								>
									<path
										d="M10.0001 18.3334C5.39771 18.3334 1.66675 14.6024 1.66675 10C1.66675 5.39765 5.39771 1.66669 10.0001 1.66669C14.6025 1.66669 18.3334 5.39765 18.3334 10"
										stroke="black"
										stroke-width="1.33333"
										stroke-linejoin="round"
									/>
									<path
										d="M8.33325 9.99997V7.11322L10.8333 8.5566L13.3333 9.99997L10.8333 11.4433L8.33325 12.8867V9.99997Z"
										stroke="black"
										stroke-width="1.33333"
										stroke-linejoin="round"
									/>
									<path
										d="M15.4377 13.3333V17.5"
										stroke="black"
										stroke-width="1.33333"
										stroke-linejoin="round"
									/>
									<path
										d="M17.4999 15.3957H13.3333"
										stroke="black"
										stroke-width="1.33333"
										stroke-linejoin="round"
									/>
								</svg>
							</span>
						</template>
						<span>添加到下一曲</span>
					</n-popover>

					<n-popover trigger="hover">
						<template #trigger>
							<span style="font-size: 0">
								<svg
									width="20"
									height="20"
									viewBox="0 0 48 48"
									fill="none"
									xmlns="http://www.w3.org/2000/svg"
									@click="download(item.id, item.song__name)"
								>
									<path
										d="M6 24.0083V42H42V24"
										stroke="#1b1b1b"
										stroke-width="4"
										stroke-linecap="round"
										stroke-linejoin="round"
									/>
									<path
										d="M33 23L24 32L15 23"
										stroke="#1b1b1b"
										stroke-width="4"
										stroke-linecap="round"
										stroke-linejoin="round"
									/>
									<path
										d="M23.9917 6V32"
										stroke="#1b1b1b"
										stroke-width="4"
										stroke-linecap="round"
										stroke-linejoin="round"
									/>
								</svg>
							</span>
						</template>
						<span>下载</span>
					</n-popover>
				</div>
				<div>{{ item.artist }}</div>
				<div>{{ item.album }}</div>
			</div>
		</div>
	</div>
</template>

<style scoped>
.table {
	width: 100%;
	height: 100%;
	padding: 6px 0;

	display: grid;
	grid-template-rows: 36px 1fr;
}

.table > .box {
	overflow: auto;
}

.table__item {
	font-weight: 500;
	font-size: 16px;
	width: calc(100% - 14px);
	height: 36px;
	display: grid;
	grid-template-columns: 1.4fr 86px 1fr 1fr;
	grid-column-gap: 8px;
	align-items: center;

	background-color: #fff;

	padding-left: 26px;
	margin-left: 14px;
}

.table__item > * {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.table__title > .table__item {
	color: #9fa6b3;
}

.tb.table__item > .icons {
	display: flex;
	align-items: center;
	gap: 12px;

	opacity: 0;
}

.tb.table__item:hover {
	background-color: #f7f7fa;
}

.tb.table__item:hover > .icons {
	opacity: 1;
}

.icons svg {
	cursor: pointer;
}
</style>
